<template>
  <view class="container">
    <view class="title">lOGIN</view>

    <view class="form-box">
      <!-- 手机号输入 -->
      <view class="input-group">
        <text class="label">MOBILE</text>
        <input
          type="number"
          v-model="formData.phone"
          maxlength="11"
          placeholder="请输入手机号"
          class="input"
        />
      </view>

      <!-- 验证码输入 -->
      <view class="input-group" v-if="isNewUser">
        <text class="label">CODE</text>
        <view class="input-with-button">
          <input
            type="number"
            v-model="formData.code"
            placeholder="PLEASE INPUT CODE"
            class="input"
            maxlength="6"
          />
          <button class="code-btn" :disabled="counting > 0" @tap="sendCode">
            {{ counting > 0 ? `${counting}s` : "GET CODE" }}
          </button>
        </view>
      </view>

      <!-- 密码输入 -->
      <template v-if="isNewUser && hasVerified">
        <view class="input-group">
          <text class="label">SET PASSWORD</text>
          <input
            type="password"
            v-model="formData.password"
            placeholder="PLEASE SET PASSWORD"
            class="input"
          />
        </view>

        <view class="input-group">
          <text class="label">CONFIRM PASSWORD</text>
          <input
            type="password"
            v-model="formData.confirmPassword"
            placeholder="PLEASE CONFIRM PASSWORD"
            class="input"
          />
        </view>
      </template>

      <!-- 已有账号密码登录 -->
      <view class="input-group" v-if="!isNewUser">
        <text class="label">PASSWORD</text>
        <input
          type="password"
          v-model="formData.password"
          placeholder="PLEASE INPUT PASSWORD"
          class="input"
        />
      </view>

      <button class="submit-btn" @tap="handleSubmit">
        {{ getButtonText }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { isValidPhone, isValidPassword, isValidCode } from "@/utils/validate";
import { showToast, showLoading, hideLoading } from "@/utils/toast";

const isNewUser = ref(false);
const hasVerified = ref(false);
const counting = ref(0);

const formData = reactive({
  phone: "",
  code: "",
  password: "",
  confirmPassword: "",
});

const getButtonText = computed(() => {
  if (!isNewUser.value) return "LOGIN";
  if (!hasVerified.value) return "VERIFY";
  return "REGISTER AND LOGIN";
});

// 发送验证码
const sendCode = async () => {
  if (counting.value > 0) return;
  if (!isValidPhone(formData.phone)) {
    showToast("PLEASE INPUT CORRECT MOBILE");
    return;
  }

  try {
    showLoading("SENDING...");
    // TODO: 调用发送验证码接口
    counting.value = 60;
    const timer = setInterval(() => {
      counting.value--;
      if (counting.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
    showToast("CODE SENT", { icon: "success" });
  } catch (error) {
    showToast("SEND FAILED, PLEASE TRY AGAIN");
  } finally {
    hideLoading();
  }
};

// 检查用户是否存在
const checkUserExist = async () => {
  // TODO: 调用接口检查用户是否存在
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(false);
    }, 500);
  });
};

// 验证验证码
const verifyCode = async () => {
  if (!isValidCode(formData.code)) {
    showToast("PLEASE INPUT CORRECT CODE");
    return false;
  }
  // TODO: 调用验证码验证接口
  return true;
};

// 提交处理
const handleSubmit = async () => {
  uni.switchTab({
        url: "/pages/index/index",
      });

      return
  if (!isValidPhone(formData.phone)) {
    showToast("PLEASE INPUT CORRECT MOBILE");
    return;
  }

  if (!isNewUser.value) {
    const exists = await checkUserExist();
    if (!exists) {
      isNewUser.value = true;
      return;
    }
    // 执行登录
    if (!isValidPassword(formData.password)) {
      showToast("PLEASE INPUT 6-20 PASSWORD");
      return;
    }
    try {
      showLoading("LOGGING IN...");
   
      // TODO: 调用登录接口
    } catch (error) {
      showToast("LOGIN FAILED, PLEASE TRY AGAIN");
    } finally {
      hideLoading();
    }
  } else {
    if (!hasVerified.value) {
      // 验证验证码
      const verified = await verifyCode();
      if (verified) {
        hasVerified.value = true;
      }
      return;
    }

    // 验证密码
    if (!isValidPassword(formData.password)) {
      showToast("PLEASE SET 6-20 PASSWORD");
      return;
    }
    if (formData.password !== formData.confirmPassword) {
      showToast("TWO PASSWORDS ARE NOT THE SAME");
      return;
    }

    try {
      uni.switchTab({
        url: "/pages/index/index",
      });
      showLoading("REGISTERING...");
      // TODO: 调用注册接口
    } catch (error) {
      showToast("REGISTER FAILED, PLEASE TRY AGAIN");
    } finally {
      hideLoading();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #000;
  padding: 40rpx;
  position: relative;

  .title {
    font-size: 48rpx;
    color: rgba(255, 255, 255, 0.9);
    margin: 60rpx 0 100rpx;
    font-weight: 300;
    letter-spacing: 2rpx;
  }

  .form-box {
    background: rgba(40, 40, 40, 0.6);
    border-radius: 24rpx;
    padding: 40rpx;

    .input-group {
      margin-bottom: 30rpx;

      .label {
        display: block;
        color: rgba(255, 255, 255, 0.6);
        font-size: 28rpx;
        margin-bottom: 16rpx;
      }

      .input-with-button {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .input {
          flex: 1;
        }

        .code-btn {
          width: 200rpx;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 24rpx;
          color: #fff;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 12rpx;
          text-align: center;

          &:disabled {
            opacity: 0.5;
          }
        }
      }

      .input {
        background: rgba(20, 20, 20, 0.8);
        height: 80rpx;
        border-radius: 12rpx;
        padding: 0 24rpx;
        color: #fff;
        font-size: 28rpx;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
    }

    .submit-btn {
      margin-top: 60rpx;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      height: 90rpx;
      line-height: 90rpx;
      color: #fff;
      font-size: 32rpx;
      border-radius: 45rpx;

      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>